$(function(){
     // 1.1 获取裁剪区域的 DOM 元素
  let $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $('#image').cropper(options)

  //头像上传三步
  //1.选择图片； 2.渲染图片  3；上传头像
  $('#chooseImageBtn').on('click',function(){
      $('#chooseImageInp').click()
  })

  //渲染图片 ：chaang 选择文件时候触发事件：在aclue值发发生改变就会触动
  $('#chooseImageInp').on('change',function(){
    let file = this.files[0]
    //非空判断
    if(file === undefined) {
        return layui.layer,msg('上传头像，不能为空!')
    }
    //根据文件对象，生成路径
    let url = URL.createObjectURL(file)
    console.log(url);
    $image.cropper('destroy')
      .attr('src',url)
      .cropper(options)
  })

  //3.头像上传
  $('#uploadBtn').on('click',function(){
      let dataURL = $image
      .cropper('getCroppedCanvas',{
          width:100,
          height:100
      })
      .toDataURL('image/png')
      console.log(dataURL);

      //ajax 发送请求
      axios({
          url:'/my/update/avatar',
          method:'post',
          //我们要自己拼接这种：a=1&b=2&c=3
          //注意：只编译 dataURL , 不要编译前面的属性和等号
          data: "avatar=" + encodeURIComponent(dataURL)
          
      }).then(res=>{
          //成功回调
        //   console.log(res)
        if(res.data.status !==0){
            return layui.layer.msg(res.data.message)
        }
        //成功：提示+刷新页面头像渲染
        layui.layer.msg('恭喜您，更改用户头像成功!')
        window.parent.getUserInfo()
      });
  })
})